<!-- 当前客户端 -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px">
        <el-radio v-model="radio" label="0" border size="mini">全部</el-radio>
        <el-radio v-model="radio" label="1" border size="mini">网关</el-radio>
        <el-radio v-model="radio" label="2" border size="mini">监控</el-radio>
        <el-switch
          v-model="isRun"
          active-color="#13ce66"
          inactive-color="#ff4949"
          active-text="开启"
          inactive-text="停止"
        >
        </el-switch>
        <i
          class="el-icon-delete"
          style="float: right; color: red; font-size: 25px; margin: 10px"
          @click="reset"
        ></i>
      </el-row>
      <yg-table
        :columns="columns"
        :tableList="TableList"
        :height="'885'"
        :loading="loadingShow"
      >
        <el-table-column slot="action" label="消息体">
          <template slot-scope="scope">
            <div>{{ scope.row.msg }}</div>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
  </div>
</template>
<script>
import YgTable from "@/components/Table/YgTable.vue";
import {
  setMessageCallback,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";

export default {
  name: "LogView",
  components: {
    YgTable,
  },
  data() {
    //这里存放数据
    return {
      columns: [
        {
          prop: "datetime",
          label: "时间",
          width: 170,
        },
        {
          prop: "target",
          label: "对象",
          width: 50,
        },
        {
          prop: "direct",
          label: "报文方向",
          width: 80,
        },
        {
          prop: "topic",
          label: "主题",
          width: 190,
        },
        {
          prop: "msgType",
          label: "消息类型",
          width: 80,
        },
        { slot: "action", align: "center" },
      ],
      TableList: [],
      radio: "0",
      isRun: true,
      loadingShow: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    reset() {
      this.TableList = [];
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1025:
          if (this.radio == 0) {
            if (this.isRun) {
              this.TableList.unshift(msg.data);
            }
          }
          switch (msg.funCode) {
            case 1:
              if (this.radio == msg.funCode) {
                if (this.isRun) {
                  this.TableList.unshift(msg.data);
                }
              }
              break;
            case 2:
              if (this.radio == msg.funCode) {
                if (this.isRun) {
                  this.TableList.unshift(msg.data);
                }
              }

              break;
            default:
              break;
          }
          break;
        default:
          break;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setMessageCallback(this.onMessage);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforedestroy() {}, //生命周期 - 销毁完成
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
.isLoginFalse {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
.isLoginTrue {
  width: 10px;
  height: 10px;
  background: rgb(79, 217, 15);
  border-radius: 50%;
}
</style>
